<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>基本信息</title> 
    <link href="css/base.css" rel="stylesheet">
    <link rel="stylesheet" href="jquery-easyui-1.5.3/themes/default/easyui.css">
    <link href="jquery-easyui-1.5.3/themes/icon.css" rel="stylesheet">
    <link href="css/basic_info.css" rel="stylesheet">
    <link rel="stylesheet" href="css/xk.css">
    <link href="css/process.css" rel="stylesheet">
</head> 
<body>
 <table align="center" width="100%" border="0" cellpadding="0" cellspacing="1"  style="margin-top:0px;">
	<tr id="line1">
	<td>
    <ul class="process clearfix">
    <li onclick="nextStep(this,1)">
      <div class="item current">
        <div class="step">
          <i>1</i>
          <label>基本信息</label>
        </div>
        <span id="span1"></span>
      </div>
    </li>
    <li onclick="nextStep(this,2)">
      <div class="item passed">
        <div class="step">
          <i>2</i>
          <label>现场图(照片)</label>
        </div>
        <span id="span2"></span>
      </div>
    </li>
    <li onclick="nextStep(this,3)">
      <div class="item passed">
        <div class="step">
          <i>3</i>
          <label>痕迹物证</label>
        </div>
        <span id="span3"></span>
      </div>
    </li>
    <li onclick="nextStep(this,4)">
      <div class="item passed">
        <div class="step">
          <i>4</i>
          <label>分析意见</label>
        </div>
        <span id="span4"></span>
      </div>
    </li>
  </ul>
   </td>
 	</tr>
  <tr>
 		<td>
 			<iframe id="content" src="jbxx"  frameborder="no" border="no"  width="100%" scrolling="auto" ></iframe>
 		</td>
 	</tr>
</table>
</body> 
</html>
    <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
    var clientHeight = document.documentElement.clientHeight;
    var line1Height = $("#line1").height();
    $("#content").height(clientHeight - line1Height - 5);
    content.location ="jbxx";
  });

function nextStep(element,step){
    if(step == 1){
       document.getElementById('content').src="jbxx";
       $(".process li:eq(0)").children().attr("class","item current");
       $(".process li:eq(1)").children().attr("class","item passed");
       $(".process li:eq(2)").children().attr("class","item passed");
       $(".process li:eq(3)").children().attr("class","item passed");
       $("#span1").css("background-position","0 150px");
       $("#span2").css("background-position","0 50px");
       $("#span3").css("background-position","0 50px");
       $("#span4").css("background-position","0 50px");
    }else if(step == 2){
       document.getElementById('content').src="xct";
       $(".process li:eq(0)").children().attr("class","item passed");
       $(".process li:eq(1)").children().attr("class","item current");
       $(".process li:eq(2)").children().attr("class","item passed");
       $(".process li:eq(3)").children().attr("class","item passed");
       $("#span1").css("background-position","0 100px");
       $("#span2").css("background-position","0 150px");
       $("#span3").css("background-position","0 50px");
       $("#span4").css("background-position","0 50px");
    }
    else if(step == 3){
       document.getElementById('content').src="hjwz";
       $(".process li:eq(0)").children().attr("class","item passed");
       $(".process li:eq(1)").children().attr("class","item passed");
       $(".process li:eq(2)").children().attr("class","item current");
       $(".process li:eq(3)").children().attr("class","item passed");
       $("#span1").css("background-position","0 50px");
       $("#span2").css("background-position","0 100px");
       $("#span3").css("background-position","0 150px");
       $("#span4").css("background-position","0 50px");
    }else{
      document.getElementById('content').src="fxyj";
      $(".process li:eq(0)").children().attr("class","item passed");
      $(".process li:eq(1)").children().attr("class","item passed");
      $(".process li:eq(2)").children().attr("class","item passed");
      $(".process li:eq(3)").children().attr("class","item current");
      $("#span1").css("background-position","0 50px");
      $("#span2").css("background-position","0 50px");
      $("#span3").css("background-position","0 100px");
      $("#span4").css("background-position","0 200px");
    }
}
</script>
